﻿<#include "include/_meta.html">
<title>我要租车</title>
<style type="text/css">
    .className {
        line-height: 40px;
        height: 40px;
        width: 98px;
        color: #ffffff;
        background-color: #ededed;
        font-size: 16px;
        font-weight: bold;
        font-family: SimSun;
        background: -webkit-gradient(linear, left top, left bottom, color-start(0.05, #768d87), color-stop(1, #6c7c7c));
        background: -moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background: -o-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background: -ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        background: linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%);
        background: -webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c', GradientType=0);
        border: 1px solid #566963;
        -webkit-border-top-left-radius: 6px;
        -moz-border-radius-topleft: 6px;
        border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
        -moz-border-radius-topright: 6px;
        border-top-right-radius: 6px;
        -webkit-border-bottom-left-radius: 6px;
        -moz-border-radius-bottomleft: 6px;
        border-bottom-left-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        -moz-border-radius-bottomright: 6px;
        border-bottom-right-radius: 6px;
        -moz-box-shadow: inset 0px 1px 3px 0px #91b8b3;
        -webkit-box-shadow: inset 0px 1px 3px 0px #91b8b3;
        box-shadow: inset 0px 1px 3px 0px #91b8b3;
        text-align: center;
        display: inline-block;
        text-decoration: none;
    }

    .className:hover {
        background-color: #f5f5f5;
        background: -webkit-gradient(linear, left top, left bottom, color-start(0.05, #6c7c7c), color-stop(1, #768d87));
        background: -moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background: -o-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background: -ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        background: linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%);
        background: -webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87', GradientType=0);
    }
</style>
</head>
<article class="page-container">
    <form class="form form-horizontal" id="form-admin-add">

        <div id="welcome">
            <input type="radio" name="custumerType" id="oldCustomer" value="old" data-waschecked="">预定租车
            <input type="radio" name="custumerType" id="newCustomer" value="new" data-waschecked="">新用户登记
            <div class="row cl" style="margin-left:700px;">
                <a id="nextStep" class='className' href="javascript:hideWelcome()" style="display: none">下一步</a>
                <a id="goRegister" class='className' href="/toCustomerReg" style="display: none">去登记</a>
            </div>
        </div>

        <!--第一块div隐藏开始-->
        <div id="oldCustumerFirstStep" name="oldCustumerFirstStep" style="display:none">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>客户id:</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" autocomplete="off" value="<#if strId?exists>${strId}</#if>"
                           placeholder="客户id" id="customerId"
                           name="customerId">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">客户预留手机号:</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="客户手机" id="mobile" name="mobile">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>取车门店：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select id="startDepartmentId"
                            style="width:200px;height:30px;font-size:16px;background-color:#E1E1E1;">
                        <option select="selected" value="请选择门店">请选择门店</option>
                    </select>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>还车门店：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select id="endDepartmentId"
                            style="width:200px;height:30px;font-size:16px;background-color:#E1E1E1;">
                        <option select="selected" value="请选择门店">请选择门店</option>
                    </select>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>预计取车时间</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" id="orderReserveStartDate" onfocus="WdatePicker({minDate:'%y-%M-#(%d+1)'})"
                           class="input-text Wdate">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>预计还车时间</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" onfocus="WdatePicker({minDate: '%y-%M-#(%d+1)'})" id="orderReserveEndDate"
                           class="input-text Wdate">
                </div>
            </div>

            <!--给button按钮设置一个事件通过js隐藏div-->
            <div class="row cl" style="margin-left:700px;">
                <a class='className' href="javascript:goSelectCar()">去订车</a>
            </div>
        </div>
        <!--第一块div隐藏结束-->
        <!--点击下一步，只把下边的div显示出来---------------------------------------------->

    </form>
    </div>
</article>
<!--点击去订车把下边的div显示出来---------------------------------------------->
<!--第2块div隐藏开始-->
<div style="height: 200px;display: none" id="carlist" name="carlist">
    <table id="carListTable" class="table table-border table-bordered table-bg table-hover">
        <thead>
        <tr class="text-c">
            <th width="150">品牌型号</th>
            <th width="150">手动自动</th>
            <th width="150">排量大小</th>
            <th width="150">外观类型</th>
            <th width="150">日租金</th>
            <th width="150">操作</th>
        </tr>
        </thead>
        <tbody class="text-c">
        </tbody>
    </table>
</div>
<#include "include/_footer.html">
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>

<script type="text/javascript">
    function getAllUsableCars() {
        $('tbody').empty()
        var startDepartmentId = $('#startDepartmentId option:selected').val()
        $.ajax({
            type: "post",
            url: "/getAllUsableCars",
            data: {
                departmentId: startDepartmentId
            },
            success: function (data) {
                $(data).each(function (i, c) {
                    var tr = " <tr>\n" +
                        "<th id='carBrand'></th>\n" +
                        "<th id='carIsAuto'></th>\n" +
                        "<th id='carDisplacement'></th>\n" +
                        "<th id='carColor'></th>\n" +
                        "<th id='carPrice'></th>\n" +
                        "<th><input type='hidden' id='carId'/><a href='javascript:;' id='choose'>选择</a></th> \n" +
                        " </tr>";
                    $("tbody").append(tr);
                    $('tbody #carBrand').eq(i).html(c.carBrand);
                    $('tbody #carIsAuto').eq(i).html(c.carIsAuto == 0 ? "自动" : "手动");
                    $('tbody #carDisplacement').eq(i).html(c.carDisplacement);
                    $('tbody #carColor').eq(i).html(c.carColor);
                    $('tbody #carId').eq(i).val(c.carId);
                    $('tbody #carPrice').eq(i).html(c.carPrice + '￥');
                })
                $('tbody #choose').click(pickCar)
            }
        })
    }

    $('input:radio').click(function () {
        var domName = $(this).attr('name');
        var $radio = $(this);
        // if this was previously checked
        if ($radio.data('waschecked') === true) {
            $radio.prop('checked', false);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
            $radio.data('waschecked', false);
        } else {
            $radio.prop('checked', true);
            $("input:radio[name='" + domName + "']").data('waschecked', false);
            $radio.data('waschecked', true);
        }
    });
    $('#oldCustomer').on('click', function () {
        $('#goRegister').css('display', 'none')
        if (this.checked) {
            $('#nextStep').css('display', 'block')
        } else {
            $('#nextStep').css('display', 'none')
        }
    })
    $('#newCustomer').on('click', function () {
        $('#nextStep').css('display', 'none')
        if (this.checked) {
            $('#goRegister').css('display', 'block')
        } else {
            $('#goRegister').css('display', 'none')
        }
    })

    function hideWelcome() {
        if ($('#oldCustomer').prop("checked")) {
            $.ajax({
                type: "get",
                url: "/getAllDepartments",
                success: function (d) {
                    $(d).each(function (i) {
                        $("#startDepartmentId").append("<option value=" + d[i].departmentId + ">" + d[i].departmentName + "</option>");
                        $("#endDepartmentId").append("<option value=" + d[i].departmentId + ">" + d[i].departmentName + "</option>");
                    });
                }
            })
            $("#welcome").css("display", "none");
            $('#oldCustumerFirstStep').css("display", "block");
        }
        if ($('#newCustomer').prop("checked")) {

        }
    }


    /*去选车*/
    function goSelectCar() {
        /*如果是否输入客户id或输入的客户id是否为数字类型*/
        if ($("#customerId").val() == null || isNaN(parseInt($("#customerId").val()))) {
            layer.msg('客户id不合法！', {icon: 5, time: 1000});
            return;
        }
        /*先判断有没有选择门店等信息*/
        if ($('#startDepartmentId').val() == '请选择门店' || $('#endDepartmentId').val() == '请选择门店') {
            layer.msg('请选择取车门店或还车门店', {icon: 5, time: 1000});
            return;
        }

        /*判断取车时间，还车时间*/
        if ($('#orderReserveStartDate').val() == '' || $('#orderReserveEndDate').val() == '') {
            layer.msg('请选择取车时间或还车时间', {icon: 5, time: 1000});
            return;
        }

        if (new Date($('#orderReserveStartDate').val()).getTime() > new Date($('#orderReserveEndDate').val()).getTime()) {
            layer.msg('取车日期不能大于还车日期', {icon: 5, time: 1000});
            return;
        }
        $.ajax({
            type: 'post',
            url: '/getCustormerById',
            data: {
                custormerId: $("#customerId").val()
            },
            success: function (data) {
                if (data === "0") {
                    layer.alert("该客户不存在，请检查客户ID是否正确")
                    return;
                } else if (data === "1") {

                    getAllUsableCars();
                    // $("#oldCustumerFirstStep").css("display", "none");
                    $("#carlist").css("display", "block");
                    $("html, body").animate({
                        scrollTop: $('html, body').get(0).scrollHeight
                    }, 1000);
                }
            }
        })
    }


    function pickCar() {
        var carId = $(this).siblings().val()
        layer.confirm("确认选择吗？", {
                btn: ["是", "否"]
            }, function (index) {
                $.ajax({
                    type: 'post',
                    data: {
                        carId: carId
                    },
                    url: '/getCarByID',
                    success: function (data) {
                        var carInfo = '<form class="carInfo">' +
                            '汽车型号:<span id="carModel"></span><br>' +
                            '单日租金:<span id="carRent"></span>￥<br>' +
                            '汽车混动类型:<span id="carDriverType"></span><br>' +
                            '当前油量:<span id="carOilValue"></span><br>' +
                            '当前电量:<span id="carElectricValue"></span><br>' +
                            '座位数量:<span id="carSetNum"></span>个<br>' +
                            '预计取车日期:<span id="aOrderReserveStartDate"></span><br>' +
                            '预计还车日期:<span id="aOrderReserveEndDate"></span><br>' +
                            '取车门店:<span id="aStartDepartmentId"></span><br>' +
                            '还车门店:<span id="aEndDepartmentId"></span><br>' +
                            '<span id="aOrderOilPrice">汽车油价:<span id="orderOilPrice">7.59</span>(￥/升)</span>' +
                            '<span id="aOrderElectricPrice">汽车电价:<span id="orderElectricPrice">0.62</span>(￥/千瓦时)</span>' +
                            '</br>押金:<input type="radio" name="orderDeposit" class="orderDeposit" value="3000"/>3000<input type="radio" name="orderDeposit" class="orderDeposit" value="5000"/>5000<input type="radio" name="orderDeposit" class="orderDeposit" value="8000"/>8000<br>' +
                            '押金缴纳:<input type="radio" name="deposit" id="depositYes"/>已缴纳 <input type="radio" name="deposit" id="depositNo"/>未缴纳<br>' +
                            '</form>';

                        layer.close(index);
                        layer.open({
                            type: 1,
                            title: '确认订单',
                            area: ['300px'],
                            shadeClose: true,
                            content: carInfo,
                            btn: ['确定', '取消'],
                            yes: function (index) {
                                layer.close(index)
                                $.ajax({
                                    type: "post",
                                    url: "/createOrder",
                                    data: {
                                        customerId: $("#customerId").val(),
                                        orderCarId: carId,
                                        startDepartmentId: $("#startDepartmentId").val(),
                                        endDepartmentId: $("#endDepartmentId").val(),
                                        orderReserveStartDate: $("#orderReserveStartDate").val(),
                                        orderReserveEndDate: $("#orderReserveEndDate").val(),
                                        orderStartCarOilValue: carOilValue,
                                        orderStartCarElectriclValue: carElectricValue,
                                        orderState: 1,
                                        orderDeposit: orderDeposit,
                                        orderOilPrice: orderOilPrice,
                                        orderElectricPrice: orderElectricPrice,
                                        orderDepositState: depositYes ? 1 : 0
                                    },
                                    success: function (data) {
                                        $.ajax({
                                            type: 'post',
                                            url: '/updateCarState',
                                            data: {
                                                carId: carId,
                                                carState: 1
                                            },
                                            success: function (data) {
                                                console.log(data)
                                                layer.confirm("创建订单成功", {
                                                        btn: ["确认"], cancel: function () {
                                                            window.location = '/toOrder'
                                                        }
                                                    },
                                                    function () {
                                                        window.location = '/toOrder'
                                                    }
                                                )

                                            }
                                        })

                                    }
                                })
                            },
                            btn2: function () {
                                layer.close()
                            },
                            end: function () {

                            }
                        })
                        $('#carModel').text(data.carModel);
                        $('#carRent').text(data.carPrice);
                        $('#carOilValue').text(data.carOilValue);
                        var carOilValue = $('#carOilValue').text();
                        $('#carElectricValue').text(data.carElectricValue);
                        var carElectricValue = $('#carElectricValue').text();
                        $('#carSetNum').text(data.carSetNum);
                        if (data.carDriverType == 0) {
                            $('#carDriverType').text("油")
                            $('#aOrderElectricPrice').remove()
                        } else if (data.carDriverType == 1) {
                            $('#carDriverType').text("电")
                            $('#aOrderOilPrice').remove()
                        } else if (data.carDriverType == 2) {
                            $('#carDriverType').text("混动")
                        }
                        $('#carDriverType').text(data.carDriverType == 0 ? "油" : "电")

                        $('#aOrderReserveStartDate').text($('#orderReserveStartDate').val())
                        $('#aOrderReserveEndDate').text($('#orderReserveEndDate').val())
                        $('#aStartDepartmentId').text($('#startDepartmentId option:selected').text())
                        $('#aEndDepartmentId').text($('#endDepartmentId option:selected').text())

                        var orderDeposit;
                        var depositYes;
                        var orderOilPrice = $('#orderOilPrice').text();
                        var orderElectricPrice = $('#orderElectricPrice').text();
                        $('.carInfo .orderDeposit').on('change', function () {
                            orderDeposit = $('.orderDeposit:checked').val()
                        })
                        $('.carInfo [name="deposit"]').on('change', function () {
                            depositYes = $('.carInfo #depositYes').prop("checked");
                        })

                    }
                })


            }
        )

    }


</script>
</body>
</html>